<template>
    <div class="home">
        <div class="container">
            <!-- 左边部分 -->
            <div class="contet_left">
                <!-- 头部搜索栏 -->
                <div class="header_h1000">
                    <div class="text_h1002">
                        <div class="color_white backcolor_1791381 fontsize_14 text_h1001">
                            <span>职位(500+)</span>
                        </div>
                        <div class="fontsize_16 color_1616161 text_h1003">
                            <span class="">公司(0)</span>
                        </div>
                    </div>
                    <div class="text_h1004">
                        <input type="text" class="input_h1004">
                        <button class="btn_h1004 backcolor_1791381 color_white">搜索</button>
                    </div>
                    <div class="text_h1005 fontsize_14 color_1616161">
                        <span>相关搜素：</span>
                        <span class="text_h1006" v-for="value in serachlist">{{ value }}</span>
                    </div>
                </div>
                <!-- 多条件选择列表 -->
                <div class="content_l2000 backcolor_250250250 border">
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">工作地点:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in areaList">{{ value
                            }}</button>
                    </div>
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">工作经验:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in workExperienceList">{{ value
                            }}</button>
                    </div>
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">学历要求:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in educationList">{{ value
                            }}</button>
                    </div>
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">融资阶段:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in stageList">{{ value
                            }}</button>
                    </div>
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">公司规模:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in inSizeList">{{ value
                            }}</button>
                    </div>
                    <div class="content_l2200 fontsize_14">
                        <strong class="color_808080">行业领域:</strong>
                        <button class="btn_l2000 color_808080 fontsize_14" v-for="value in industryFieldList">{{ value
                            }}</button>
                    </div>
                </div>
                <!-- 排列方式按钮 -->
                <div class="contet_l3300 border">
                    <div class="content_l3000 backcolor_250250250">
                        <div class="text_l30001">
                            <strong class="fontsize_14 color_808080 text_l3003">排列方式:</strong>
                            <button class="fontsize_14 color_808080 border_none text_l3002">默认</button>
                            <button class="fontsize_14 color_808080 border_none text_l3002">最新</button>
                        </div>
                        <!-- 月薪 -->
                        <el-form ref="form" :model="form" label-width="80px" size="mini" class="dis_flex">
                            <el-form-item label="活动区域:" class="fontsize_14 color_808080 font_weight  text_l3306">
                                <el-select v-model="form.salary" placeholder="请选择" class="input_width">
                                    <el-option v-for="item in salaryList" :key="item.id" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 工作属性 -->
                            <el-form-item label="工作属性:" class="fontsize_14 color_808080 font_weight text_l3306">
                                <el-select v-model="form.attribute" placeholder="请选择" class="input_width">
                                    <el-option v-for="(item, id) in attributeList" :key="id" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 分页栏 -->
                    <div class="content_l3005 backcolor_250250250 border_left">
                    </div>
                </div>
                <!-- 职位列表 -->
                <div class="marg_top20">
                    <!-- 单个表单样式 -->
                    <div class="marg_bottom20 border conten_l1111" v-for="value in jobDisplayList"
                        @click="jumpOccupation">
                        <!-- 是否急招 -->
                        <div class="label_l4400" v-if="value.needValue">
                            <span class="transform_text">急招</span>
                        </div>
                        <div class="text_l4400">
                            <div class="text_l4401">
                                <strong class="color_1791381 fontsize_16">{{ value.post }}[{{ value.area }}]</strong>
                                <span class="fontsize_14 color_1616161 marginleft_10">1天前发布</span>
                                <div class=" margintop_8">
                                    <span class="fontsize_16 text_l4404">{{ value.salary }}</span>
                                    <span class="fontsize_14 color_808080">经验5-10年 /{{ value.education }}</span>
                                </div>
                            </div>
                            <div class="text_l4402">
                                <div class="text_l4405">
                                    <strong class="color_1791381 fontsize_16">{{ value.company }}</strong>
                                    <img src="../assets/89.svg" class="image_l4400">
                                </div>
                                <div class="margintop_8"><span class="fontsize_14 color_808080">金融 / 不需要融资 /
                                        500-2000人</span></div>
                            </div>
                            <div class="text_l4403">
                                <img :src="value.image" class="image_l4403">
                            </div>
                        </div>
                        <div class="backcolor_250250250 text_l4410">
                            <div class="text_l4408 marginleft_10">
                                <span class="span_l4400 border" v-for="item in value.welfare">{{ item }}</span>
                            </div>
                            <div class="text_l4408 text_l4411">
                                <span>{{ value.label }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部链接栏 -->
                <div class="margintop_8">
                    <div class="fontsize_14 color_808080">推荐公司:</div>
                    <div class="text_l50005">
                        <div class="text_l50007" v-for="item in companyLinkList.slice(0, 10)"><a
                                class="fontsize_14 color_1791381 link_l5003" :href="item.url">{{ item.company }}</a>
                        </div>
                    </div>
                    <div class="text_l5001">
                        <input type="checkbox" id="toggle" v-model="toggle" class="toggle" hidden>
                        <div class="panel">
                            <div class="text_l50003" v-for="item in companyLinkList"><a
                                    class="fontsize_14 color_1791381 link_l5003" :href="item.url">{{ item.company }}</a>
                            </div>
                        </div>
                        <label for="toggle" class="trigger">
                            <!-- 展开▾ -->
                            {{ this.toggle ? "折叠▴" : "展开▾" }}
                        </label>
                    </div>
                </div>
                <!-- 分页栏 -->
                <div class="conten_l6000">
                    <el-pagination :page-size="8" :pager-count="8" layout="prev, pager, next" :total="100">
                    </el-pagination>
                </div>
            </div>
            <!-- 右边部分 -->
            <div class="conten_right">
                <div class="image_r1000" v-for="image in adList">
                    <img :src="image.src" class="image_r1100">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"

export default {
    name: 'Home',
    data() {
        return {

            
            serachlist: [
                'Java', 'Python', 'c++', 'mySQL'
            ],
            areaList: [
                '全国', '北京', '上海', '',
            ],
            workExperienceList: [
                '不限', '应届毕业生', '3年及以下', '3-5年', '5-10年', '10年以上', '不要求'
            ],
            educationList: [
                '不限', '大专', '本科', '硕士', '博士', '不要求'
            ],
            stageList: [
                '不限', '为融资', '天使轮', 'A轮', 'B轮', 'C轮', 'D轮', '上市公司', '不需要融资'
            ],
            inSizeList: [
                '不限', '少于15人', '15-50人', '50-100人', '150-500人', '500-2000人', '2000人以上'
            ],
            industryFieldList: [
                '不限', '移动互联网', '电子商务', '金融', '企业服务', '教育', '文化娱乐', '游戏', 'O2O'
            ],
            form: {
                salary: '',
                attribute: '',
            },
            salaryList: [
                { id: 1, value: '不限' },
                { id: 2, value: '全职' },
                { id: 3, value: '兼职' },
                { id: 4, value: '实习' }
            ],
            attributeList: [
                '不限', '2k以下', '2k-5k', '5k-10k', '10k-15k', '15k-25k', '25k-50k', '50k以上'
            ],
            needValue: true,
            jobDisplayList: [
                {
                    post: '高级Java开发工程师',
                    salary: '20k-35k', area: '深圳·科技园',
                    education: '本科',
                    welfare: ['绩效奖金', '带薪年假', '节日礼物'],
                    company: '有金所',
                    label: "“领先薪酬，收货成长，节日福利，学习型组织”",
                    image: require('@/assets/90.png'),
                    needValue: true,
                },
                {
                    post: '高级Java开发工程师',
                    salary: '20k-35k', area: '深圳·科技园',
                    education: '本科',
                    welfare: ['岗位晋升', '带薪年假', '节日礼物'],
                    company: '有金所',
                    label: "“领先薪酬，收货成长，节日福利，学习型组织”",
                    image: require('@/assets/90.png')
                },
                {
                    post: '高级Java开发工程师',
                    salary: '20k-35k', area: '深圳·科技园',
                    education: '本科',
                    welfare: ['岗位晋升', '绩效奖金', '节日礼物'],
                    company: '有金所',
                    label: "“领先薪酬，收货成长，节日福利，学习型组织”",
                    image: require('@/assets/90.png'),
                    needValue: true,
                },
            ],
            adList: [
                { src: require('@/assets/50.png') },
                { src: require('@/assets/51.png') },
                { src: require('@/assets/52.png') },
            ],
            companyLinkList: [
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '喜马拉雅', url: 'https://www.ximalaya.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '喜马拉雅', url: 'https://www.ximalaya.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '喜马拉雅', url: 'https://www.ximalaya.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '喜马拉雅', url: 'https://www.ximalaya.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
                { company: '喜马拉雅', url: 'https://www.ximalaya.com/' },
                { company: '美柚', url: 'https://www.meiyou.com/' },
            ],
            toggle: false,
        }
    },
    methods: {
        jumpOccupation() {
            this.$router.push('/occupationdetails')
        }
    }
}
</script>

<style scoped>
/* 共用样式 */
.fontsize_18 {
    font-size: 18px;
}

.fontsize_16 {
    font-size: 16px;
}

.fontsize_14 {
    font-size: 14px;
}

.color_8585851 {
    color: rgba(85, 85, 85, 1);
}

.color_1616161 {
    color: rgba(166, 166, 166, 1);
}

.color_1791381 {
    color: rgba(76, 176, 141, 1);
}

.color_808080 {
    color: rgba(80, 80, 80, 1);
}

.backcolor_1791381 {
    background-color: rgba(76, 176, 141, 1);
}

.backcolor_229229229 {
    background-color: rgba(229, 229, 229, 1);
}

.backcolor_250250250 {
    background-color: rgba(250, 250, 250, 1);
}

.border {
    border: rgba(229, 229, 229, 1) solid 1px;
}

.border_left {
    border-left: rgba(229, 229, 229, 1) solid 1px;
}

.color_white {
    color: white;
}

.border_none {
    border: none;
    background-color: transparent;
}

.text_h1005 {
    margin-top: 5px;
}

.margintop_8 {
    margin-top: 8px;
}

.font_weight {
    font-weight: bold;
}

.dis_flex {
    display: flex;
}

.marg_top20 {
    margin-top: 20px;
}

.label_l4400 {
    position: absolute;
    height: 60px;
    width: 60px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    color: white;
    background-color: rgba(255, 98, 0, 1);
    clip-path: polygon(0 0, 65% 0, 0 65%);
}

.marg_bottom20 {
    margin-bottom: 20px;
}

.marginleft_10 {
    margin-left: 10px;
}


/*  */

.home {
    margin-bottom: 50px;
}

.container {
    margin-top: 120px;
    margin-left: 100px;
    margin-bottom: 30px;
    width: 80%;
    display: flex;
}

.contet_left {
    flex: 2;
    margin-right: 2%;
}

.conten_right {
    flex: 1;
    margin-top: 135px;
}

.image_r1000 {
    margin-top: 20px;
}

.image_r1100 {
    height: 124px;
}

.text_h1001 {
    padding: 10px;
    border-radius: 4px;
}

.text_h1002 {
    display: flex;
}

.text_h1003 {
    padding: 10px;
    margin-left: 5px;
}

.text_h1004 {
    margin-top: 10px;
    display: flex;
}

.input_h1004 {
    line-height: 45px;
    border: rgba(204, 204, 204, 1) solid 1px;
    flex: 8;
    font-size: 18px;
    outline: none;
}

.btn_h1004 {
    padding: 5px 15px;
    flex: 1;
    border: none;
}

.text_h1006 {
    margin-left: 12px;
}

.content_l2000 {
    margin-top: 36px;
    padding: 10px;
}

.content_l2200 {
    margin: 8px 8px;
}

.btn_l2000 {
    margin-left: 20px;
    padding: 2px 4px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.btn_l2000:hover {
    color: white;
    background-color: rgba(76, 176, 141, 1);
}

.contet_l3300 {
    margin-top: 30px;
    display: flex
}

.content_l3000 {
    padding: 15px 0px;
    display: flex;
    flex: 8;
}

.text_l30001 {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.text_l3002 {
    margin-right: 15px;
    cursor: pointer;
}

.text_l3003 {
    margin-right: 15px;
}

.content_l3004 {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.content_l3005 {
    flex: 1;
}

.form_l3003 {
    text-align: center;
}

.input_l3002 {
    width: 100px;
}

.text_l4000 {
    height: 100px;
    display: flex;
    align-items: center;
}

.el-form-item {
    margin-bottom: 0px;
}

.content_l33003 {
    display: flex;
}

.input_width {
    width: 100px;
}

.text_l3306 {
    margin-left: 40px;
}

.text_l4400 {
    padding: 20px 16px;
    display: flex;
}

.text_l4401 {
    flex: 3;
}

.text_l4402 {
    flex: 2;
}

.text_l4403 {
    flex: 1;
    text-align: center;
}

.image_l4400 {
    margin-left: 5px;
    height: 20px;
}

.image_l4403 {
    height: 60px;
}

.text_l4405 {
    display: flex;
    align-items: center;
}

.text_l4404 {
    color: rgba(255, 98, 0, 1);
    margin-right: 20px;
    font-weight: bold;
}

.text_l4408 {
    font-size: 12px;
    color: rgba(128, 128, 128, 1)
}

.text_l4410 {
    padding: 14px 15px;
    display: flex;
}

.span_l4400 {
    padding: 4px;
    margin-right: 8px;
    background-color: white;
    border-radius: 2px;
}

.text_l4411 {
    flex: 1;
    text-align: center;
}

.conten_l1111 {
    cursor: pointer;
}

.transform_text {
    transform: rotate(-45deg);
}

.text_l5001 {
    height: 42;
    display: flex;
    align-items: center;
    position: relative;
}


.conten_l6000 {
    margin-top: 30px;
    text-align: center;
}

:deep(.el-pager li.active) {
    border: rgba(76, 176, 141, 1) solid 1px;
    border-radius: 4px;
    color: rgba(76, 176, 141, 1);
}

:deep(.btn-prev) {
    border: rgba(204, 204, 204, 1) solid 1px;
    padding: 0px 3px;
    border-radius: 4px;
    font-weight: bold;
}

:deep(.btn-next) {
    border: rgba(204, 204, 204, 1) solid 1px;
    padding: 0px 3px;
    border-radius: 4px;
    font-weight: bold;
}

:deep(.el-pager li) {
    border: rgba(204, 204, 204, 1) solid 1px;
    border-radius: 4px;
    margin: 0px 3px;
}

/* 1. 控制开关 */
.toggle:checked+.panel {
    max-height: 300px;
    /* 比真实内容大一些即可 */
    opacity: 1;
    transform: scaleY(1);
    flex: 1;
}

/* 2. 面板默认收起状态 */
.panel {
    max-height: 0;
    /* 关键：让高度从 0 开始 */
    overflow: hidden;
    opacity: 0;
    transform-origin: top;
    transform: scaleY();
    transition: max-height .35s ease,
        opacity .25s ease,
        transform .35s ease;
    flex: 1;
}

/* 3. 触发器样式（可随意改） */
.trigger {
    width: 40px;
    font-size: 14px;
    color: rgba(166, 166, 166, 1);
    cursor: pointer;
    user-select: none;
    text-align: right;
    position: absolute;
    right: 0;
    top: -20px;
}

.text_l50005 {
    margin-top: 8px;
    width: 98%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.text_l50003 {
    margin-top: 8px;
    display: inline-block;
    width: 10%;
}

.text_l50007 {
    display: inline-block;
    width: 10%;
}
</style>